<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-15 16:50:09
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 20:16:40
-->
<template>
    <div>
        <el-button type="primary" @click="setDialogVisible(true)">新增用户</el-button>
        <el-button type="danger" :disabled="userIds.length > 0 ? false : true" @click="batchDeletion">批量删除</el-button>
        <el-button type="danger" :disabled="userIds.length > 0 ? false : true" @click="exposeExcelUser">导出文件</el-button>
    </div>
</template>

<script setup lang="ts">
/**
 * 导入配置
 * xlsx
 */
import { errorMessage } from '@/utils/Tools/errorMessage';
import { successMessage } from '@/utils/Tools/successMessage';
import { ElLoading, ElMessageBox } from 'element-plus';
import { utils, writeFile } from 'xlsx'


/**
 * 定义Props
 */
interface IProps {
    setDialogVisible: (visible: boolean) => void
    userIds: number[]
}


/**
 * 接收props数据
 */
const props = defineProps<IProps>()

/**
 * 定义数据
 * 自定义批量删除方法
 */
const emit = defineEmits<{
    onBatchDeletion: []
}>()

/**
 * 处理事件
 * 批量删除用户
 * 批量导出用户
 */
const batchDeletion = async () => {
    try {
        await ElMessageBox.confirm('Are you sure you want to delete the selected user records?', 'Select all Delete Confirm', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning'
        })
        emit('onBatchDeletion')
    } catch (error) {

    }

}
const exposeExcelUser = () => {
    // 点击导出时，有一个加载的动画，因为导出它可能会有些慢，为更好的用户体验，尽量加一个
    const loading = ElLoading.service({
        lock: true,
        text: '数据正在玩命导出生成中...',
        background: 'rgba(0, 0, 0, 0.6)'
    })
    try {
        // 把json数据导入为excel中的sheet数据类型
        const sheet = utils.json_to_sheet([
            { 姓名: '张三', 性别: '男', 年龄: '18' },
            { 姓名: '李四', 性别: '女', 年龄: '19' },
            { 姓名: '王五', 性别: '男', 年龄: '20' }
        ])
        // const sheet = utils.json_to_sheet(exportUserData(this.tableData))
        // 创建工作簿
        const workerBook = utils.book_new()
        utils.book_append_sheet(workerBook, sheet, '用户信息记录')
        // 将工作簿数据写入或下载到文件
        writeFile(workerBook, '用户信息记录.xlsx')
        successMessage('导出用户记录成功', () => {
            loading.close()
        }, 3000)
    } catch (err) {
        errorMessage('导出用户记录失败，请重新选中导出', () => {
            loading.close()
        }, 3000)
    }
}
</script>

<style lang="scss" scoped></style>